<template>
  <div>
    <Card shadow>
      <Form ref="submitForm" :model="formData" label-position="top">
        <FormItem label="模块" prop="module">
          <Select
            v-model="formData.module"
            style="width: 180px;"
            @on-change="changeModule"
          >
            <Option
              v-for="item in moduleList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="字段信息" prop="checkBox">
          <template>
            <div
              style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"
            >
              <Checkbox
                :indeterminate="indeterminate"
                :value="checkAll"
                @click.prevent.native="handleCheckAll"
                >全选
              </Checkbox>
            </div>
            <CheckboxGroup
              v-model="formData.checkBox"
              @on-change="checkAllGroupChange"
            >
              <Checkbox
                v-for="(item, index) in checkBoxList"
                :key="index"
                :label="item.id"
                >{{ item.name }}</Checkbox
              >
            </CheckboxGroup>
          </template>
        </FormItem>
        <FormItem label="筛选条件">
          <div
            v-for="(item, index) in filterArr"
            :key="index"
            style="display: flex;margin-top: 15px;"
          >
            <div style="width: 180px;">
              <Select
                v-model="formData.isFilterArr[index].one"
                @on-change="changeSelects(index)"
              >
                <Option
                  v-for="(item1, index1) in filterArr[index].oneList"
                  :value="item1.id"
                  :key="item1.value"
                >
                  {{ item1.name }}
                </Option>
              </Select>
            </div>
            <div style="width: 180px;margin-left: 15px;">
              <Select v-model="formData.isFilterArr[index].two">
                <Option
                  v-for="item in filterArr[index].twoList"
                  :value="item.id"
                  :key="item.value"
                  >{{ item.name }}
                </Option>
              </Select>
            </div>
            <div style="width: 220px;margin-left: 15px;">
              <!-- 为一级下拉框 -->
              <Select
                v-if="formData.isFilterArr[index].select_input === 1"
                v-model="formData.isFilterArr[index].three"
                :filterable="filterable"
                clearable
                remote
                :remote-method="remoteMethod1"
                :loading="loading1"
              >
                <Option
                  v-for="item in filterArr[index].threeList"
                  :value="item.id"
                  :key="item.value"
                  >{{ item.name }}
                </Option>
              </Select>
              <!-- 为输入框 -->
              <Input
                v-if="formData.isFilterArr[index].select_input === 2"
                v-model="formData.isFilterArr[index].three"
              ></Input>
              <!-- 为二级下拉框 -->
              <Select
                v-if="formData.isFilterArr[index].select_input === 4"
                v-model="formData.isFilterArr[index].three"
              >
                <Option-group
                  :label="item.name"
                  v-for="item in filterArr[index].threeList"
                  :key="item.id"
                >
                  <Option
                    v-for="items in item.children"
                    :value="items.id"
                    :key="items.id"
                    >{{ items.name }}</Option
                  >
                </Option-group>
              </Select>
              <!-- 为时间选择器 -->
              <DatePicker
                :options="options"
                v-model="formData.isFilterArr[index].three"
                v-if="formData.isFilterArr[index].select_input === 3"
                type="daterange"
                placement="bottom-end"
                placeholder="请选择日期"
              ></DatePicker>
            </div>
            <div style="width: 180px;margin-left: 10px;">
              <Button type="default" @click="delatefilterArr(index)"
                >删除</Button
              >
            </div>
          </div>
          <div style="margin-top: 20px;">
            <Button
              :disabled="!lastComplete"
              type="dashed"
              @click="addfilterArr"
              >+ 新增</Button
            >
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">开始导出</Button>
        </FormItem>
      </Form>
    </Card>
    <Modal
      :mask-closable="false"
      :footer-hide="true"
      v-model="modal1"
      draggable
      title="数据导出"
      @on-cancel="cancel"
    >
      <p>
        数据正在导出，
        <span style="font-size:16px;color: #f90;">{{ time }}</span>
        秒后页面将跳转至数据导出日志页面
      </p>
    </Modal>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  exportInfoList,
  exportSelectList,
  exportData,
  exportSearchCity,
} from "../../../api/setting.js";
export default {
  data() {
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      modal1: false,
      timer: null,
      loading1: false,
      //是否select支持搜索
      filterable: false,
      timer: null,
      time: 10,
      //检验数据
      formData: {
        //初始化给1,因为需要这个去拿其他的筛选项
        module: 1,
        checkBox: [],
        //select的数据,后面会根据index添加或者减少
        isFilterArr: [
          {
            //第一,二,三个select
            one: "",
            two: "",
            three: "",
            //在未选择第一个的时候禁止第三个selectg下拉
            select_input: 2,
          },
        ],
      },
      //渲染select数据
      filterArr: [
        {
          oneList: [],
          twoList: [],
          threeList: [],
        },
      ],
      //自定义的中间select的数据
      compareList: [
        {
          id: "=",
          name: "等于",
        },
        {
          id: "!=",
          name: "不等于",
        },
      ],
      compareList1: [
        {
          id: "=",
          name: "等于",
        },
        {
          id: "!=",
          name: "不等于",
        },
        {
          id: ">=",
          name: "大于等于",
        },
        {
          id: "<=",
          name: "小于等于",
        },
      ],
      indeterminate: false,
      //
      checkBoxList: [],
      isOneList: [],
      checkAll: false,
      moduleList: [
        {
          value: 1,
          label: "患者",
        },
        {
          value: 2,
          label: "导医",
        },
        {
          value: 3,
          label: "消费",
        },
        {
          value: 4,
          label: "治疗",
        },
        {
          value: 5,
          label: "回访",
        },
      ],
    };
  },
  computed: {
    lastComplete() {
      if (this.formData.isFilterArr.length >= 1) {
        let last = this.formData.isFilterArr[
          this.formData.isFilterArr.length - 1
        ];
        if (last.one !== "" && last.two !== "" && last.three !== "") {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
  },
  created() {
    this._exportInfoList({
      mudle_id: this.formData.module,
    });
  },
  mounted() {},
  methods: {
    cancel() {
      this.modal1 = false;
      this.timer && clearInterval(this.timer);
      this.time = 10;
    },
    remoteMethod1(value) {},
    searchCity(params, index) {
      exportSearchCity(params).then((res) => {
        console.log(res);
        this.$set(this.filterArr[index], "threeList", res.list);
        console.log(this.filterArr);
      });
    },
    changeModule(value) {
      this.indeterminate = false;
      this.formData.checkBox = [];
      this.formData.isFilterArr = [
        {
          //第一,二,三个select
          one: "",
          two: "",
          three: "",
          //在未选择第一个的时候禁止第三个selectg下拉
          select_input: 2,
        },
      ];
      this.filterArr = [
        {
          oneList: [],
          twoList: [],
          threeList: [],
        },
      ];
      this.isOneList = [];
      this._exportInfoList({
        mudle_id: value,
      });
    },
    submit() {
      let params = this.formData;
      if (!params.module) {
        this.$Message.warning("请完善模块选项");
        return false;
      }
      if (!params.checkBox || params.checkBox.length == 0) {
        this.$Message.warning("请选择字段信息");
        return false;
      }
      let condition = params.isFilterArr
        .map((vv) => {
          if (vv.one !== "" && vv.two !== "" && vv.three !== "") {
            if (vv.three instanceof Array) {
              return {
                id: vv.one,
                operator: vv.two,
                start_time: dayjs(vv.three[0]).format("YYYY-MM-DD"),
                end_time: dayjs(vv.three[1]).format("YYYY-MM-DD"),
              };
            } else {
              return {
                id: vv.one,
                operator: vv.two,
                value: vv.three,
              };
            }
          }
        })
        .filter((e) => e);
      let requeseparams = {
        mudle_id: JSON.stringify(params.module),
        select: JSON.stringify(params.checkBox),
        condition: JSON.stringify(condition),
      };
      exportData(requeseparams).then((res) => {
        this.modal1 = true;
        this.timer = setInterval(() => {
          this.time = this.time - 1;
          if (this.time <= 0) {
            clearInterval(this.timer);
            this.modal1 = false;
            this.time = 10;
            this.$router.push("/setting/managementData/exportLog");
          }
        }, 1000);
      });
    },
    //点击删除某一个select筛选
    delatefilterArr(index) {
      this.filterArr.splice(index, 1);
      this.formData.isFilterArr.splice(index, 1);
    },
    //点击新增,网filterArr数组增加一个数据,用来多渲染一条赛选规则
    addfilterArr() {
      this.filterArr.push({
        oneList: this.isOneList,
        twoList: this.compareList,
        threeList: [],
      });
      this.formData.isFilterArr.push({
        one: "",
        two: "",
        three: "",
        select_input: 2,
      });
    },
    changeSelects(index) {
      this.formData.isFilterArr[index].three = "";
      let choose_id = this.formData.isFilterArr[index].one;
      let isWho = this.isOneList.filter((e) => e.id == choose_id)[0];
      this.filterable = false;
      if (isWho) {
        this.formData.isFilterArr[index].select_input = isWho.is_choose;
        this.$set(this.filterArr[index], "twoList", this.compareList);
        if (isWho.is_choose === 1) {
          //判断是否存在是因为当点击删除的时候触发了这个函数,choose_id是不存在的,阻止发送请求
          if (choose_id) {
            //选择患者标签的时候二级下拉，不能选择一级
            if (isWho.name === "患者标签") {
              this.formData.isFilterArr[index].select_input = 4;
            }
            if (isWho.name === "地区") {
              this.filterable = true;
            }
            let params = { choose_id };
            exportSelectList(params).then((res) => {
              this.$set(this.filterArr[index], "threeList", res);
            });
          }
        } else if (isWho.is_choose === 2) {
          //选择年龄的时候，第二个选项多了大于等于，和小于等于选项
          if (isWho.name == "年龄") {
            this.$set(this.filterArr[index], "twoList", this.compareList1);
          }
        }
      }
    },
    //初始化请求数据,以及赋值
    _exportInfoList(params) {
      exportInfoList(params).then((res) => {
        console.log(res);
        this.checkBoxList = res.field_list;
        this.isOneList = res.select_field_list;
        this.filterArr[0].oneList = res.select_field_list;
        this.filterArr[0].twoList = this.compareList;
      });
    },
    //全选
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;
      if (this.checkAll) {
        this.formData.checkBox = this.checkBoxList.map((v) => v.id);
      } else {
        this.formData.checkBox = [];
      }
    },
    //单选
    checkAllGroupChange(data) {
      if (data.length === this.checkBoxList.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
  },
};
</script>

<style scoped></style>
